<template>
<div class="login">
<van-nav-bar
  title="登录"
  left-text=""
  left-arrow
  @click-left="onClickLeft"
/>
<img src="https://sta.guazistatic.com/c2c_uc/pic6@3x.8f6f340875e71c69b2f7d45e3eef87dc.png" alt="">
<van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="手机号码"
    label="手机号码"
    placeholder="请填写手机号码"
    :rules="[{ required: true, message: '请填写手机号码' }]"
  />
  <van-field
    v-model="password"
    id="aaa"
    type="password"
    name="验证码"
    label="验证码"
    placeholder="请输入验证码"
    :rules="[{ required: true, message: '请填写验证码' }]"
  />
</van-form>
<div>
    <span
    class="message"
    @click="handlegetcode"
    >获取验证码</span>
</div>
<button class="btn" @click="loginUser">登录</button>
<p>登录即为同意<span>《用户使用协议》</span>及<span>《隐私权条款》</span></p>
</div>
</template>

<script>
import { Toast } from 'vant'
// import { getCode } from '@/api/login'
export default {
  name: 'AppLogin',
  data() {
    return {
      username: '',
      password: '',
    }
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values)
    },
    onClickLeft() {
      this.$router.back()
    },
    handlegetcode() {
      const result1 = Math.floor(Math.random() * 10)
      const result2 = Math.floor(Math.random() * 10)
      const result3 = Math.floor(Math.random() * 10)
      const result4 = Math.floor(Math.random() * 10)
      const str = String(result1) + String(result2) + String(result3) + String(result4)
      const phone = document.querySelector('.van-field__control').value
      if (!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
        alert('手机号码有误，请重新输入')
      } else {
        Toast(`您的验证码为：${str}`)
      }
      return localStorage.setItem(phone, str)
    },
    loginUser() {
      const phone = document.querySelector('.van-field__control').value
      const message = document.querySelector('#aaa').value
      console.log(message)
      if (localStorage.getItem(phone) === message) {
        alert('登录成功')
        this.$router.push('/my')
      } else {
        alert('请输入正确的用户名或密码')
        return false
      }
    },
  },
}
</script>

<style lang="scss" scoped>
img{
    width: 100%;
    margin-bottom: 40px;
}
.message{
    font-size: 12px;
    float: right;
    margin-right: 40px;
    color: red;
}
.btn{
    background-color: #02c386;
    width: 8.9rem;
    height: 1.1rem;
    margin-left: 0.607rem;
    margin-top: 0.7rem;
    margin-top: 0.7rem;
    border: none;
    font-size: 16px;
    letter-spacing: 2px;
    color: #9fe1c7;
}
p{
    text-align: center;
    font-size: 12px;
    float: left;
    margin: 0 auto;
    margin-left: 100px;
    margin-top: 50px;
    span{
        color: #35b349;
    }
}
</style>
